<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" :role-names="roleNames" :post-names="postNames" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="基本信息" name="account">

                <account :user="user" />
              </el-tab-pane>
              <!--              <el-tab-pane label="Timeline" name="timeline">-->
              <!--                <timeline />-->
              <!--              </el-tab-pane>-->
              <el-tab-pane label="修改密码" name="activity">
                <password />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import UserCard from './components/UserCard'
import Account from './components/Account'
import Password from './components/Password'

import { getInfo } from '@/api/user'
import { handleGetAllRoleList } from '@/views/sys/role/api'
import { handleGetAllPostList } from '@/views/sys/post/api'
import { convertPost, convertRole } from '@/utils'

export default {
  name: 'Profile',
  components: { UserCard, Account, Password },
  data() {
    return {
      user: {},
      postId: '',
      roleId: '',
      activeTab: 'account',
      roleOptions: [],
      postOptions: []
    }
  },
  computed: {
    roleNames() {
      // 处理多角色ID的情况（假设roleId是用逗号分隔的字符串）
      const roleIds = this.roleId.split(',')
      return roleIds
        .map(id => convertRole(id, this.roleOptions))
        .join(', ')
    },
    postNames() {
      // 处理多角色ID的情况（假设roleId是用逗号分隔的字符串）
      const postIds = this.postId.split(',')
      return postIds
        .map(id => convertPost(id, this.postOptions))
        .join(', ')
    }
  },
  watch: {

  },
  created() {
    this.getUser()
    this.getAllRoleListFunction()
    this.getAllPostListFunction()
  },
  methods: {

    getUser() {
      getInfo()
        .then(response => {
          this.user = response.data
          this.roleId = response.data.roleId
          this.postId = response.data.postId
        })
    },
    getAllRoleListFunction() {
      handleGetAllRoleList()
        .then(response => {
          this.roleOptions = response.data
        })
    },
    getAllPostListFunction() {
      handleGetAllPostList()
        .then(response => {
          this.postOptions = response.data
        })
    }
  }
}
</script>
